<script setup lang="ts">
import {useRouter, useRoute} from 'vue-router';
import {ref} from 'vue';
import {jStorage} from 'jzutil';
import {ElMessage} from 'element-plus';
const router = useRouter();
const route = useRoute();
const tableData = ref([]);
const columns: any[] = [
    {
        label: '作品名称',
        key: 'name'
    },
    {
        label: '作品风格',
        key: 'style'
    },
    {
        label: '年龄范围',
        key: 'ageRange'
    },
    {
        label: '规格',
        key: 'level'
    },
    {
        label: '拍摄时间',
        key: 'tekeTime'
    },

    {
        label: '客户名称',
        key: 'clientName'
    },

    {
        label: '点赞数量',
        key: 'likeNum'
    }
];
const handlePreview = (row: any) => {
    router.push({
        path: '/source/source-works-detail',
        query: {
            id: row.id
        }
    });
};

const handleDelete = (row: any) => {};
const handleAdd = () => {
    router.push('/source/source-works-detail');
};
//风格管理
const showStyleModal = ref(false);
const styleTags = ref<string[]>([]);
const handleStyleModal = () => {
    showStyleModal.value = true;
};

const addTagInputVisible = ref(false);
const newTag = ref('');
const handleAddStyleConfirm = () => {
    styleTags.value.push(newTag.value);
    addTagInputVisible.value = false;
    newTag.value = '';
};
const handleDeleteStyle = (index: number) => {
    styleTags.value.splice(index, 1);
};
const saveStyles = () => {
    //TODO 保存风格到后台
    jStorage.setLocal('styles', styleTags.value);
    showStyleModal.value = false;
    ElMessage.success({
        message: '保存成功',
        type: 'success',
        duration: 1000
    });
};
//年龄段管理
const showAgeModal = ref(false);
const ageTags = ref<{name: string; age: string}[]>([]);
const handleAgeModal = () => {
    showAgeModal.value = true;
};

const addAgeInputVisible = ref(false);
const newAge = ref<{name: string; age: string}>({
    name: '',
    age: ''
});
const handleAddAgeConfirm = () => {
    ageTags.value.push(newAge.value);
    addAgeInputVisible.value = false;
    newAge.value = {
        name: '',
        age: ''
    };
};
const handleDeleteAge = (index: number) => {
    ageTags.value.splice(index, 1);
};
const saveAge = () => {
    //TODO 保存风格到后台
    jStorage.setLocal('age', ageTags.value);
    showAgeModal.value = false;
    ElMessage.success({
        message: '保存成功',
        type: 'success',
        duration: 1000
    });
};
(() => {
    //TODO 从后台获取风格列表
    const styles = jStorage.getLocal('styles') || [];
    styleTags.value = styles;
    jStorage.setSession('styles', styles);
    //TODO 从后台获取风格列表
    const ages = jStorage.getLocal('age') || [];
    ageTags.value = ages;

    jStorage.setSession('ages', ages);
    const works = jStorage.getLocal('works') || [];
    tableData.value = works;
})();
const handleInMini = (row: any) => {
    router.push({
        path: '/source/source-works-detail',
        query: {
            id: row.name
        }
    });
};
</script>
<template>
    <el-container>
        <el-header class="page-header">
            <el-button type="primary" icon="el-icon-circle-plus" size="medium" @click="handleAdd">新增</el-button>
            <el-button type="primary" icon="el-icon-s-flag" size="medium" @click="handleStyleModal">风格管理</el-button>
            <el-button
                type="primary"
                icon="el-icon-s-data
"
                size="medium"
                @click="handleAgeModal"
                >年龄范围管理</el-button
            >
        </el-header>
        <el-main class="page-body">
            <div class="page-body-table">
                <el-table :data="tableData" stripe border style="width: 100%" height="100%">
                    <el-table-column type="index" width="50"> </el-table-column>
                    <el-table-column
                        :prop="item.key"
                        :label="item.label"
                        v-for="(item, index) in columns"
                        :key="index.toString()"
                    >
                    </el-table-column>
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button size="mini" type="text" @click="handlePreview(scope.row)">编辑</el-button>
                            <el-button size="mini" type="text" @click="handleInMini(scope.row)">预览</el-button>
                            <el-button size="mini" type="text" @click="handleDelete(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="page-body-pagination">
                <el-pagination background layout="total, prev, pager, next" :total="1000"></el-pagination>
            </div>
        </el-main>
        <el-dialog
            title="风格管理"
            v-model="showStyleModal"
            width="40%"
            :close-on-press-escape="false"
            :close-on-click-modal="false"
        >
            <div>
                <el-tag
                    :key="tag"
                    v-for="(tag, index) in styleTags"
                    closable
                    class="style-item"
                    :disable-transitions="false"
                    @close="handleDeleteStyle(index)"
                >
                    {{ tag }}
                </el-tag>
                <el-input class="input-new-tag" v-if="addTagInputVisible" v-model="newTag" size="small"> </el-input>
                <span @click="handleAddStyleConfirm" class="input-new-tag-confirm" v-if="addTagInputVisible">
                    <i class="el-icon-check"></i>
                </span>
                <el-button v-else class="button-new-tag" size="small" @click="addTagInputVisible = true"
                    >+ 新增风格类型</el-button
                >
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="showStyleModal = false">取 消</el-button>
                    <el-button type="primary" @click="saveStyles">保 存</el-button>
                </span>
            </template>
        </el-dialog>
        <el-dialog
            title="年龄范围"
            v-model="showAgeModal"
            width="40%"
            :close-on-press-escape="false"
            :close-on-click-modal="false"
        >
            <div>
                <el-tag
                    :key="index.toString()"
                    v-for="(age, index) in ageTags"
                    closable
                    class="style-item"
                    :disable-transitions="false"
                    @close="handleDeleteAge(index)"
                >
                    {{ age.name }}
                </el-tag>
                <el-input
                    class="input-new-tag"
                    v-if="addAgeInputVisible"
                    v-model="newAge.name"
                    size="small"
                    @keyup.enter="handleAddAgeConfirm"
                >
                </el-input>
                <el-input class="input-new-tag" v-if="addAgeInputVisible" v-model="newAge.age" size="small"> </el-input>
                <span @click="handleAddAgeConfirm" class="input-new-tag-confirm" v-if="addAgeInputVisible">
                    <i class="el-icon-check"></i>
                </span>
                <el-button v-else class="button-new-tag" size="small" @click="addAgeInputVisible = true"
                    >+ 新增年龄范围</el-button
                >
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="showAgeModal = false">取 消</el-button>
                    <el-button type="primary" @click="saveAge">保 存</el-button>
                </span>
            </template>
        </el-dialog>
    </el-container>
</template>
<style scoped lang="less">
.page-header {
    display: flex;
    align-items: center;
}
.page-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    height: calc(100% - 60px);
}
.page-body-table {
    width: 100%;
    height: calc(100% - 40px);
}
.input-new-tag {
    width: 120px;
    margin: 5px;
}
.style-item {
    margin: 5px;
}
.button-new-tag {
    margin: 5px;
}
.input-new-tag-confirm {
    display: inline-block;
    width: 16px;
    height: 16px;
    font-weight: bold;
    color: #fff;
    background-color: rgb(29, 177, 29);
    cursor: pointer;
    margin: 0 5px;
    border-radius: 50%;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
}
</style>
